<template>
  <div>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f5f6fa', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="cardName" label="年卡名称"></el-table-column>
      <el-table-column prop="cardType" label="年卡类型">
        <template slot-scope="scope">
          {{ scope.row.cardType == 1 ? "标准票" : "儿童/老年票" }}
        </template>
      </el-table-column>
      <el-table-column prop="cardPrice" label="年卡价格">
        <template slot-scope="scope">
          <el-link type="primary" @click="showUpdatePrice(scope.row)">
            {{ scope.row.cardPrice }} 元
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="年卡信息修改时间">
        <template slot-scope="scope">
          {{
            scope.row.updateTime
              .substr(0, scope.row.updateTime.lastIndexOf("."))
              .replace("T", " ")
          }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改年卡价格"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
    >
      <el-form :model="priceForm" ref="priceFormRefs" :rules="priceFormRules">
        <el-form-item label="年卡原价格：" :label-width="formLabelWidth">
          {{ oldPrice }} 元
        </el-form-item>
        <el-form-item
          label="年卡价格修改为："
          :label-width="formLabelWidth"
          prop="price"
        >
          <el-input
            v-model.number="priceForm.price"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      tableData: [],
      oldPrice: "",
      id: "",
      dialogFormVisible: false,
      priceForm: {
        price: "",
      },
      priceFormRules: {
        price: [
          { required: true, message: "价格不能为空", trigger: "blur" },
          { type: "number", message: "价格必须为数字值", trigger: "blur" },
        ],
      },
      formLabelWidth: "150px",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.post(`${this.$server}/manageSystemCardInfo`).then((response) => {
        if (response.data.code == 200) {
          this.tableData = response.data.data;
          console.log(response.data);
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    showUpdatePrice(scope) {
      this.oldPrice = scope.cardPrice;
      this.id = scope._id;
      this.dialogFormVisible = true;
    },
    submitForm() {
      this.$refs.priceFormRefs.validate((valid) => {
        if (valid) {
          axios
            .post(`${this.$server}/manageSystemCardPriceChange`, {
              id: this.id,
              price: this.priceForm.price,
              updateTime: Date.now(),
            })
            .then((response) => {
              if (response.data.code == 200) {
                this.tableData = response.data.data;
                console.log(response.data);
                this.dialogFormVisible = false;
                this.getData();
              } else {
                this.$message.error(response.data.msg);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.priceForm.price = "";
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  width: 32%;
}
</style>
